@import "../shared/pages/shared";
@import "./mixins";

$contentContainerWidthMax: 70rem;

$lightThemeBackgroundColor: #fff;

/* High-priority message that shows up over everything else on the page */

@define-mixin takeoverMessage {
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  padding: 4rem 2rem;
  max-width: $contentContainerWidthMax;
  background-color: $lightThemeBackgroundColor;
  overflow: auto;
}

body {
  margin: 0 auto;
  padding: 0 2rem 3rem;
  max-width: $contentContainerWidthMax;
}

[data-takeover-active="true"] {
  overflow: hidden;
}

/* Message banner */

.messageBanner {
  margin: 0;
  padding: 1rem;
  background-color: #f7f7f7;
}

@mixin messageBannerPositioned top, bottom;
@mixin messageBannerPositioned bottom, top;

.messageBanner .pwText {
  @mixin secondaryText;
  line-height: 1.3;
  margin: 0;
  text-align: right;
}

/* @todo Refactor language files to avoid tag names. */

.messageBanner a {
  @mixin link;
  color: #0c63fb;
}

/* Version 9 upgrade message */

#hadVersion8InstalledBeforeMessageContainer {
  @mixin takeoverMessage;
}

#hadVersion8InstalledBeforeMessage {
  @mixin paragraph;
  margin-top: 1.5rem;
  white-space: pre-line;
}

#hadVersion8InstalledBeforeMessage [data-context="expertModes"] {
  font-weight: 700;
}

#hadVersion8InstalledBeforeMessage [data-context="otherModes"] {
  font-style: italic;
}

#hadVersion8InstalledBeforeMessageAcknowledgmentCta {
  @mixin cta;
  margin-top: 3rem;
}

#hadVersion8InstalledBeforeMessageRemovalCta {
  @mixin textualCta;
  font-size: 1.4em;
  margin-top: 1.5rem;
}

/* Feedback call-to-actions */

#feedbackCtasContainer {
  position: fixed;
  z-index: 1;
  right: 2rem;
}

.feedbackCta {
  @mixin cta;
  font-size: 2em;
  display: inline-block;
  padding: 1rem;
  text-decoration: none;
  text-shadow: .1rem .1rem #000;

  &:hover {
    transform: scale( 1.2 );
  }
}

/* Settings form */

#settingsForm {
  margin: 2rem 0;
}

.optionsChanger,
input.optionsChanger {
  margin-left: 3rem;
  padding-top: 0;
  padding-bottom: 0;
  max-width: 35rem;
}

.optionsChanger.custom {
  width: 10rem;
}

.optionsChanger:invalid {
  border-color: #f00;
}

/* Button mode */

#buttonModeContainer {
  align-items: flex-start;
}

#buttonModeGroups {
  margin: 0;
  padding-left: 1.5rem;
}

[for="buttonMode"] {
  display: flex;
  align-items: center;
  height: 3.5rem;
}

.buttonModeGroupCaption {
  font-size: 1.4em;
  font-weight: 700;
}

.buttonModeGroup:first-child .buttonModeGroupCaption {
  margin-top: 0;
}

.buttonModeGroupDescription {
  font-size: 1.4em;
  margin-bottom: 0;
  white-space: pre-line;
}

.buttonModeDemoCta {
  @mixin textualCta;
  font-size: 1.3em;
}

.buttonModeGroupItemsList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.buttonModeGroupItemLabel {
  display: flex;
  align-items: center;
}

.buttonModeGroupItemsList .optionsChanger {
  margin-top: 0;
}

.buttonModeGroupItemText {
  font-size: 1.4em;
  margin-left: 1rem;
  padding: .5rem 0;
}

#disableExpertButtonModesCta {
  @mixin textualCta;
  @mixin link;
  font-size: 1.4em;
  color: #15c;
}

/* Other specific ones */

[data-i18n="uiLanguage"]::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: .5rem;
  width: 2rem;
  height: 2rem;
  background: url( /options/img/switch-language.svg ) center / contain no-repeat;
}

#author {
  margin-left: 1.5rem;
}

#settingsForm .pwFormControls {
  display: flex;
  align-items: baseline;
}

#saveSettings {
  display: flex;
}

#status {
  line-height: 2;
  margin: 0 0 0 1.5rem;
}

/* Permissions and privacy information */

#permissionsPrivacyDetailsContainer {
  @mixin takeoverMessage;
}

.permissionsPrivacyDetails {
  @mixin paragraph;
  font-size: 1.8em;
  line-height: 1.4;
  margin-bottom: 2rem;
  white-space: pre-line;
}

[data-i18n="privacyDetails"] {
  font-weight: 700;
}

/* Secondary information */

#waysToSupportDevelopmentContainer {
  margin-bottom: 3rem;
}

.secondaryInfoContainer::before {
  content: '';
  position: absolute;
  top: -1.7rem;
  right: 0;
  left: 0;
  height: .1rem;
  border-top: .1rem dashed #ccc;
}

/* Links */

.linksMessage {
  @mixin secondaryText;
  margin-right: 3rem;
  margin-left: 3rem;
}

.links {
  @mixin secondaryInfoBlock;
  line-height: 2rem;
  padding-left: .5rem;
}

.linkWrapper {
  @mixin secondaryText;
  line-height: 1.2;
  margin-bottom: .5rem;
}

/* @todo Refactor language files to avoid tag names. */

.linkWrapper a {
  @mixin link;
  color: #15c;
}

/* Version and license info */

#versionAndLicenseContainer {
    margin-top: 3rem;
}

#versionAndLicenseText {
    font-size: 1.4em;
}

@media ( max-width: 30em /* Up to 480px */ ) {

  /* Settings */

  .optionsChanger,
  input.optionsChanger {
    max-width: 22rem;
  }

  #author {
    margin-left: .5rem;
  }
}
